// ContactForm.module.scss
@use 'sass:math';

// 变量定义
$primary-color: #1890ff;
$secondary-color: #52c41a;
$danger-color: #ff4d4f;
$text-color: #333;
$border-color: #ddd;
$background-color: #f8f9fa;
$white: #fff;
$spacing-unit: 8px;
$form-width: 100%;
$max-width: 800px;

header{
    width: 100%;
    height: 2.5rem;
    background:#195c9a ;
  
}
h3{
    margin-left: 20px;
}
// 表单容器
.contactForm {
 background-color: $white;
 border-radius: 8px;
 padding: 2rem;
 box-shadow: 0 2px 10px rgba(0,0,0,0.05);
 max-width: $max-width;
 width: $form-width;
 margin: 0 auto;

 fieldset {
 border: none;
 padding: 0;
 margin: 0;

 legend {
 font-size: 1rem;
 color: $text-color;
 padding: 0 1rem;
 margin-bottom: 1.5rem;
 width: auto;
 border-bottom: none;
 }
 .notice{
width: 520px;
 }
 }

 .formGroup {
 margin-bottom: 1.5rem;

 label {
 display: block;
 margin-bottom: 0.5rem;
 font-weight: 500;
 color: $text-color;
 }

 input {
 width: 100%;
 padding: 0.75rem;
 border: 1px solid $border-color;
 border-radius: 4px;
 transition: border-color 0.3s ease;

 &:focus {
 outline: none;
 border-color: $primary-color;
 box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
 }

 &::placeholder {
 color: #aaa;
 }
 }

 sup {
 color: $danger-color;
 font-size: 0.8em;
 vertical-align: super;
 }
 }

 .buttonGroup {
 display: flex;
 gap: 1rem;
 margin-top: 1.5rem;

 button {
 flex: 1;
 padding: 0.75rem 1.5rem;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 transition: opacity 0.3s ease;

 &:hover {
 opacity: 0.9;
 }

 &[disabled] {
 background-color: #ccc;
 cursor: not-allowed;
 opacity: 0.7;
 }
 }

 .submitButton {
 background-color: $primary-color;
 color: $white;
 }

 .recordButton {
 background: none;
 border: none;
 color: $primary-color;
 cursor: pointer;
 }
 }
 // 新增多文件上传样式
.uploadGroup {
 margin-bottom: 1.5rem;
 position: relative;

 .uploadLabel {
 display: inline-flex;
 align-items: center;
 padding: 0.75rem 1.5rem;
 border: 1px solid $border-color;
 border-radius: 4px;
 background-color: #f8f9fa;
 cursor: pointer;
 transition: all 0.3s ease;

 &:hover {
 background-color: #e9ecef;
 }

 &:active {
 transform: scale(0.98);
 }
 }

 .fileList {
 margin-top: 0.5rem;
 padding-left: 1rem;

 .fileItem {
 color: $primary-color;
 margin-bottom: 0.25rem;
 }
 }
}

 // 文本域样式
.textarea {
 width: 100%;
 height: 150px;
 padding: 0.75rem;
 border: 1px solid $border-color;
 border-radius: 4px;
 resize: vertical;
 transition: border-color 0.3s ease;

 &:focus {
 outline: none;
 border-color: $primary-color;
 box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
 }
}
}